<template lang="html">
    <div class="rules" ref="rulesMask">
      <div class="rules-btn" @click="hideRule">活动规则</div>
      <transition name="rules">
        <div class="rules-wrap" v-if="!isHideRule" >
          <div class="mask" @click="hideRule"></div>
          <div class="rule">
            <div class="rule-wrap">
              <div class="rule-top">
                <span></span>
                <span></span>
              </div>
              <div class="rule-btn" @click="hideRule"><span></span></div>
              <ul class="rule-words">
              <li>1、投资定期1000元以上返16元，投资定期20000元以上返360元；例如：投资定期2000元返32元；投资定期40000元返720元，以此类推。</li>
                <li>2、在活动时间内返现券可无限次数地重复使用，投资后返现金额在一个工作日内发放至鲸鱼账户中。</li>
                <li>3、本活动排行榜前10名可瓜分666元现金奖励。排行榜按累计返现金额高低排名。现金奖励将在7个工作日内发放至鲸鱼账户中。</li>
                <li>4、若排行榜中累计返现金额相同的，则按参与该活动的时间先后顺序排名；若累计金额与参与时间完全一致，则并列排名。</li>
                <li>5、活动时间：4月17日至4月24日23：59有效。</li>
                <li>6、在法律允许范围内，鲸鱼保留对该活动的最终解释权。</li>
              </ul>
            </div>
          </div>
        </div>
      </transition>
    </div>

</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      isHideRule: true
    }
  },
  methods: {
    hideRule: function () {
      // 禁止滚动穿透
      this.$refs.rulesMask.addEventListener('touchmove', function(e) {
        e.preventDefault();
      }, false);
      this.isHideRule = !this.isHideRule
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">

.rules
  position relative
  .rules-wrap
    position relative
    z-index 9999
    .mask
      position fixed
      top 0
      left 0
      height 100%
      width 100%
      background-color rgba(7,17,27,0.6)
    .rule
      -webkit-transform:translate(-50%,-50%)
      transform:translate(-50%,-50%)
      -webkit-transform translate3d(-50%,-50%,0)
      transform translate3d(-50%,-50%,0)
      position fixed
      left 50%
      top 53%
      width 7.4rem
      border-radius .2133rem
      background-color #f0493c
      .rule-wrap
        position relative
        margin .2666rem
        border-radius .2rem
        font-size .2933rem
        line-height .4366rem
        background-color #d43a2e
        color #ffd0a6
        .rule-top
          position absolute
          left 50%
          top -1.4rem
          -webkit-transform translate3d(-50%,0,0)
          transform translate3d(-50%,0,0)
          width 4rem
          height 1.68rem
          background-image url('./assets/rule_top.png')
          background-repeat no-repeat
          background-size 100% 100%
        .rule-btn
          float right
          margin -.56rem
          padding .08rem
          border-radius 50%
          background-color #f0493c
          span
            display block
            position relative
            width .4rem
            height .4rem
            border .1rem #faf4c2 solid
            border-radius 50%
            padding 0.1rem
            background-color #faf4c2
            &:before,&:after
              content: '';
              position: absolute;
              height: .08rem;
              width: 100%;
              top: 50%;
              left: 0;
              margin-top: -.04rem;
              border-radius .01rem
              background: #f0493c;
            &:before
              -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
            &:after
              -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
        p
          padding .1rem 1.2rem .5rem
        ul.rule-words
          padding .7rem .4rem 0
          li
            margin-bottom .44rem
  .rules-btn
    position absolute
    right 0
    top 1.1rem
    z-index 8
    height .86rem
    width .7rem
    margin-top .2rem
    padding .1rem .1rem 0 .34rem
    border-radius  0.5rem 0 0 0.5rem
    line-height .4rem
    font-size .32rem
    background-color #f8c43e
    color #e3354f
  .rules-enter-active, .rules-leave-active {
    transition: opacity .3s
    -webkit-transition: opacity .3s
  }
  .rules-enter, .rules-leave-active {
    opacity: 0
  }
</style>
